<template>
  <el-dialog title="查看历史数据" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body width="1200px">
    <el-row class="JNPF-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <!-- <el-col :span="10">
          <el-form-item label="关键词">
            <el-input
              v-model="keyword"
              placeholder="请输入危化品名称或别名"
              clearable
            />
          </el-form-item>
        </el-col> -->
        <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
                <el-col :span="6">
                    <el-form-item label="设备编号" prop="azwz" >
                    <el-input v-model="sbbh" placeholder="设备编号" clearable :style='{"width":"100%"}' disabled prefix-icon="" suffix-icon="" >
                        <template slot="prepend"></template>
                        <template slot="append"></template>
                    </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="设备名称" prop="azwz" >
                    <el-input v-model="sbmc" placeholder="设备名称" clearable :style='{"width":"100%"}' disabled prefix-icon="" suffix-icon="" >
                        <template slot="prepend"></template>
                        <template slot="append"></template>
                    </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="采集时间">
                        <el-date-picker v-model="query.cjsj" placeholder="采集时间" clearable format="yyyy-MM-dd HH:mm:ss" type="datetime"  />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="initTable(row)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                </el-form-item>
                </el-col>
            </el-form>
		</el-row>
        <!-- <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="init()"
              >{{ $t("common.search") }}
            </el-button>
            <el-button icon="el-icon-refresh-right" @click="refresh()"
              >{{ $t("common.reset") }}
            </el-button>
          </el-form-item>
        </el-col> -->
      </el-form>
      <div class="JNPF-common-search-box-right">
        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
          <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false" @click="refresh()" />
        </el-tooltip>
      </div>
    </el-row>
    <JNPF-table v-loading="listLoading" :data="list">
        <el-table-column prop="sbbh" label="设备编号" align="left" />
        <el-table-column prop="sbmc" label="设备名称" align="left" width="150"/>
        <el-table-column prop="cjsj" label="采集时间" align="left" width="150"/>
         <el-table-column prop="cjz" label="采集值" align="left"/>
        <el-table-column label="采集类型"  prop="cjlx" algin="left">
            <template slot-scope="scope">{{ scope.row.cjlx | dynamicText(cjlxOptions) }}</template>
        </el-table-column>
        <el-table-column label="是否报警"  prop="isbj" algin="left">
            <template slot-scope="scope">{{ scope.row.isbj | dynamicText(isbjOptions) }}</template>
        </el-table-column>
        <!-- <el-table-column label="所属单位"  prop="jldw" algin="left">
						<template slot-scope="scope">{{ scope.row.jldw | dynamicText(jldwOptions) }}</template>
		</el-table-column> -->
        <el-table-column prop="jldw" label="计量单位" align="left" />
        <el-table-column prop="bjzgx" label="报警值高限" align="left" />
        <el-table-column prop="bjzggx" label="报警值高高限" align="left" />
        <el-table-column prop="bjzdx" label="报警值低限" align="left" />
        <el-table-column prop="bjzddx" label="报警值低低限" align="left" />
	</JNPF-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initTable(row)" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{
        $t("common.cancelButton")
      }}</el-button>
      <!-- <el-button type="primary" @click="select()">{{
        $t("common.confirmButton")
      }}</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
// import {previewDataInterface} from '@/api/systemData/dataInterface'
export default {
  data() {
    return {
      visible: false,
      listLoading: true,
      keyword: "",
      list: [],
      total: 0,
      checked: [],
      query: {
          cjsj:undefined,
      },
      listQuery: {
			currentPage: 1,
			pageSize: 20,
           sort: "desc",
           sidx: "",
      },
      columnList: [
					{prop: 'sbbh', label: '设备编号'},
					{prop: 'sbmc', label: '设备名称'},
					{prop: 'bjzgx', label: '报警值高限'},
					{prop: 'bjzggx', label: '报警值高高限'},
					{prop: 'bjzdx', label: '报警值低限'},
					{prop: 'bjzddx', label: '报警值低低限'},
					{prop: 'cjsj', label: '采集时间'},
					{prop: 'cjlx', label: '采集类型'},
					{prop: 'isbj', label: '是否报警'},
					{prop: 'jldw', label: '所属单位'},

                ],
        cjlxOptions:[{"fullName":"开关量","id":"0"},{"fullName":"模拟量","id":"1"}],
        isbjOptions:[{"fullName":"报警","id":"0"},{"fullName":"正常","id":"1"}],
        jldwOptions:[],
        row: undefined,
        yjid:undefined,
        sbbh:undefined,
        sbmc:undefined,
    };
  },
  created(){
  },
  methods: {
    initTable(row) {
       this.row = row;
      this.sbbh = row.sbbm;
      this.sbmc = row.sbmc;
      this.yjid = row.id;
      this.visible = true;
      this.listLoading = true;
      let query = {
        ...this.listQuery,
        ...this.query,
        yjid: this.yjid
      };
      request({
        url: `/api/system/anfxJczbyjrecord`,
            method: 'get',
            data: query
        }).then(res => {
            this.list = res.data.list;
            this.listLoading = false;
            this.total = res.data.pagination.total;
            this.$nextTick(() => {
                this.tableHeight = "100%"
        });
      })  
    },
    // refresh() {
    //   // this.keyword = "";
    //   this.init(this.row);
    // },
    select() {
      if (!this.checked.length) return;
      this.visible = false;
      this.$emit("refreshDataList", this.checked);
    },
    handleSelectionChange(val) {
      this.checked = val;
    },
    refresh(isrRefresh) {
        this.formVisible = false
        if (isrRefresh) this.reset()
    },
    reset() {
        for (let key in this.query) {
            this.query[key] = undefined
        }
        this.listQuery = {
            currentPage: 1,
            pageSize: 20,

            sort: "desc",
            sidx: "",
        }
        this.initTable(this.row)
    }
  },
};
</script>
<style lang="scss" scoped>
>>> .el-dialog__body {
  height: 70vh;
  padding: 0 0 10px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .JNPF-common-search-box {
    margin-bottom: 0;
    .JNPF-common-search-box-right {
      padding: 10px 10px 0 0;
    }
  }
}
</style>